<template>
    <!--新进客户查询 -->
    <div>
        <!-- <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>我的客户/新进客户查询</h1>
        </div>  -->
        <div class="white ptop">
            <ui-form v-model="searchForm" label-width="100px" class="query-form">
                <ui-form-item label="客户名称">
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerName"> </ui-input>
                </ui-form-item>

                <ui-form-item label="客户号">
                    <ui-input type="text" placeholder="请输入关键字查询" v-model="searchForm.customerNo"> </ui-input>
                </ui-form-item>
                <ui-form-item label="新进时间">
                    <div style="display: flex;width: 500px;">
                        <ui-date-picker v-model="searchForm.startDate" type="date" placeholder="请选择起始时间">
                        </ui-date-picker>
                        <span style=" width: 30px;padding: 0px 10px;">——</span>
                        <ui-date-picker v-model="searchForm.endDate" type="date" placeholder="请选择结束时间" @change="checkdate">
                        </ui-date-picker>
                    </div>
                </ui-form-item>
            </ui-form>
            <div class="xian"></div>
        </div>

        <div class="white btnBody">
            <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
            <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
        </div>
        <div class="white tableBod">
            <vx-table :tableData="tableData" :isSelect="false" :columns="columns" @multipleSelection="multipleSelection"
                :buttomGroup="buttomGroup"></vx-table>
        </div>

        <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
            :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </ui-pagination>

    </div>
</template>
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table';

export default {
    mixins: [pagination],
    components: {
        vxTable,
    },
    data() {
        return {
            searchForm: {
                customerName: '',
                customerNo: '',
                startDate: '',
                endDate: ''
            },
            layout: "total, sizes, prev, pager, next, jumper", // 分页顺序
            columns: [
                {
                    prop: 'userName',
                    label: '序号',
                    type: 'index',
                    width: '150px',
                    fixed: true,
                },
                {
                    prop: 'userName',
                    label: '客户姓名',
                    fixed: true,
                },
                {
                    prop: 'userName',
                    label: '客户号',
                    fixed: true,
                },
                {
                    prop: 'userName',
                    label: '移出时间',
                    fixed: true,
                },

            ],
            buttomGroup: []
        }
    },
    methods: {
        checkdate() {
            console.log("11");
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .ui-input__prefix {
    display: none;
}
</style>